<!--
 * @Description: 第二十一章（transition动画组件） transition-Appear属性
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 18:56:52
-->
<template>
  <div>
    <h1>第二十一章（transition动画组件） transition-Appear属性</h1>
    <div class="container">
      <div>
        <h2>Appear属性</h2>
        <p>进入时首次显示的动画</p>
        <button @click="flag1 = !flag1">switch</button>
        <Transition
          appear
          appear-from-class="from"
          appear-active-class="active"
          appear-to-class="to"
        >
          <div v-if="flag1" class="box"></div>
        </Transition>
      </div>

      <div>
        <h2>Appear属性+Animate.css</h2>
        <p>进入时首次显示的动画</p>
        <button @click="flag2 = !flag2">switch</button>
        <Transition appear appear-active-class="animate__animated animate__bounceOut">
          <div v-if="flag2" class="box"></div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import 'animate.css'
const flag1 = ref<boolean>(true)
const flag2 = ref<boolean>(true)
</script>
<style scoped lang="less">
h1,
h2,
h3 {
  margin: 10px 0;
}

.container {
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  & > div {
    width: 300px;
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

//开始过度
.from {
  width: 0;
  height: 0;
  transform: rotate(360deg);
}

//开始过度了
.active {
  transition: all 2s ease;
}

//过度完成
.to {
  background: rgb(186, 10, 202);
  width: 200px;
  height: 200px;
}
</style>
